<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three Rows and Three Columns Layout</title>
    <style>
        /* 网格容器的样式，三行三列布局 */
        .grid-container {
            display: grid; /* 启用 CSS Grid 布局 */
            grid-template-columns: 1fr 1fr 1fr; /* 设置三列，等宽 */
            grid-template-rows: 120px 500px 40px; /* 定义三行，分别为头部120px，中部500px，底部40px */
            gap: 10px; /* 设置每个网格项之间的间距 */
        }

        /* 头部样式 */
        #header {
            grid-column: 1 / span 3; /* 头部横跨三列 */
            background: #223344; /* 背景颜色 */
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-size: 24px;
        }

        /* 中部样式 */
        #main {
            display: grid;
            grid-column: 1 / span 3; /* 中部区域同样横跨三列 */
            grid-template-columns: 30% 50% 20%; /* 定义左中右三列的比例布局 */
            background: #553344; /* 背景颜色 */
            height: 500px; /* 中部区域高度为500px */
        }

        /* 底部样式 */
        #footer {
            grid-column: 1 / span 3; /* 底部横跨三列 */
            background: #993344;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-size: 18px;
        }

        /* 左侧栏样式 */
        #left {
            background: #223344;
        }

        /* 中间内容区样式 */
        #center {
            background: #553344;
        }

        /* 右侧栏样式 */
        #right {
            background: #993344;
        }
    </style>
</head>
<body>

    <!-- 网格容器 -->
    <div class="grid-container">
        <!-- 头部 -->
        <div id="header">Header</div>
        
        <!-- 中部，包含左中右三部分 -->
        <div id="main">
            <div id="left">Left</div>
            <div id="center">Center</div>
            <div id="right">Right</div>
        </div>
        
        <!-- 底部 -->
        <div id="footer">Footer</div>
    </div>

</body>
</html>
